<template>
  <div class="yingmoo-store">
    <ul class="nav">
      <router-link tag="li" to="/ymMemberaccount">账户信息</router-link>
      <router-link tag="li" to="/ymMemberaccountamendtel">修改手机号</router-link>
      <router-link tag="li" to="/ymMemberaccountamendneweimal">修改邮箱</router-link>
      <router-link tag="li" to="/ymMemberaccountamendpassword">修改密码</router-link>
      <router-link tag="li" v-if="user.shop == 0" to="/ymMemberapplyforverify">申请验证</router-link>
      <!--<div class="uploading">资料完整度 <span>17%</span></div>-->
    </ul>
    <div class="content">
      <h4>基础信息</h4>
      <div class="message">
        <div class="message-left">
          <p>用户名</p>
          <p>企业名称</p>
          <p>公司所在地</p>
          <p>详细地址</p>
          <p>主营业务</p>
          <p>一句话简介</p>
        </div>
        <div class="message-right">
          <p class="name">{{user.contentUser}}</p>
          <div class="input">
            <input v-model="memberCorp.contentCorp" type="text" placeholder="请输入您的企业名称" /><span>*</span>
          </div>
          <div>
            <select v-model="procode" id="proCode" @change="showProCode">
            	<option value="">--请选择--</option>
              <option v-for="pro in province" :value="pro.value">{{pro.text}}</option>
            </select>
            <select v-model="citycode" id="cityCode" @change="showCityCode">
              <option value="">--请选择--</option>
              <option v-for="city in citys" :value="city.value">{{city.text}}</option>
            </select>
            <select v-model="memberCorp.contentArea" id="area" @change="confirmSelect">
              <option value="">--请选择--</option>
              <option v-for="area in areas" :value="area.value">{{area.text}}</option>
            </select><span>*</span>
          </div>
          
          <div class="input">
            <input type="text" v-model="memberCorp.contentAddr" placeholder="请输入您的详细地址" /><span>*</span>
          </div>
          
          <div class="input">
            <input type="text" v-model="memberCorp.contentBusiness" placeholder="请输入主营业务" /><span>*</span>
          </div>
          
          <div class="input">
            <input type="text" v-model="memberCorp.contentSlo" placeholder="将显示在公司主页的背景图上" /><span>*</span>
          </div>
        </div>
      </div>
      <h4>联系方式</h4>
      <div class="message">
        <div class="message-left">
          <p>联系人</p>
          <!--<p>职务</p>-->
          <p>手机号码</p>
          <p>公司电话</p>
          <p>QQ</p>
          <p>电子邮箱</p>
        </div>
        <div class="message-right">
          <div class="input">
            <input type="text" v-model="memberCorp.contentName" placeholder="" /><span>*</span>
          </div>
          <p>{{user.mobile}}<span><img src="../assets/ym-member/count/dui.png" />已验证</span>
          	<a href="../#/ymMemberaccountamendtel"><span><img src="../assets/ym-member/count/tan.png" />修改手机号</span></a>
          </p>
          <div class="input">
            <input type="text" v-model="memberCorp.contentTel" placeholder="" /><span>*</span>
          </div>
          <div class="input">
            <input type="text" v-model="memberCorp.contentQq" placeholder="" />
          </div>
          <div class="input">
            <input type="text" v-model="user.contentEmail" placeholder="" />
          </div>
          <!--<p>250141822@qq.com  <span><img src="../assets/ym-member/count/dui.png" />已验证</span><span><img src="../assets/ym-member/count/tan.png" />修改手机号</span></p>-->
        </div>
      </div>
      <h4>联系方式</h4>
      <div class="message">
        <div class="message-left">
          <p>公司网址</p>
          <p>公司简介</p>
        </div>
        <div class="message-right">
          <div class="input">
            <input type="text" v-model="memberCorp.contentLink" placeholder="请输入您公司的网址，如： http://www.yingmoo.com/" />
          </div>
          <div>
            <textarea class="intro" v-model="memberCorp.contentBody"></textarea>
          </div>
        </div>
      </div>
      <h4>企业logo</h4>
      
      <div class="message">
        <div class="message-left">
          <p>上传头像</p>
        </div>
        <div class="message-right">
          <div class="select">
            <div>
            	<span class="text">选择图片</span>
	        		<input id="image" type="file" class="up_pic" @change="uploadImg">
            </div>
            <p><span class="color">*</span><span>注：仅支持JPG,PNG,JPEG格式，文件小于5M</span></p>
          </div>
          <div class="image-logo">
            <img id="imgShow" width="126px" height="112px" :src="memberCorp.contentLogo" />
          </div>
          <div class="submit" @click="manageInfo">提交</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "yingmoo-store",
  data(){
  	return {
  		requestAddr:this.GLOBAL.addr,
  		user:{},
  		memberCorp:{},
  		province:[],
  		citys:[],
  		areas:[],
  		procode:'',
  		citycode:'',
  		areacode:''
  	}
  },
	mounted(){
		this.getUser();
		this.getAreaList('');
	},
	methods:{
		getUser:function(){
			this.user = JSON.parse(localStorage.getItem("user"));
			this.getMemberCorpInfo();
		},
		getMemberCorpInfo:function(){
			this.$http.post(this.requestAddr+"/GetJson/getMemberCorpInfo",{"memberId":this.user.autoId},{emulateJSON:true}).then(
				(res)=>{
					if((res.data.memberCorp) == null){return}
					this.memberCorp = res.data.memberCorp;
					var code = this.memberCorp.contentArea;
					this.procode = code.substring(0,4);
					this.getAreaList(this.procode);
					this.citycode = code.substring(0,8);
					this.getAreaList(this.citycode);
				}
			);
		},
		manageInfo:function(){
			this.memberCorp.memberId = this.user.autoId;
			this.memberCorp.levelId = 1;
			this.memberCorp.contentUser = this.user.contentUser;
			this.memberCorp.contentMobile = this.user.mobile;
			this.memberCorp.shopLevel = 0;
			this.$http.post(this.requestAddr+"/GetJson/completeInfo",this.memberCorp,{emulateJSON:true}).then(
				(res)=>{
					this.$confirm('您的信息已成功修改！', '成功提示', {
	          confirmButtonText: '确定',
	          cancelButtonText: '取消',
	          type: 'success' 
	        }).then(
	        	()=>{
	        		window.location.href = "../#/ymMemberdefault"
	        	}
	        )
				}
			);
		},
		getAreaList:function(areaCode){
			console.log(areaCode);
			this.$http.post(this.requestAddr+"/GetJson/getAreaList",{"parentCode":areaCode},{emulateJSON: true}).then(
				(res)=>{
					if(areaCode == null || areaCode == ''){
						this.province = res.data.result;						
					}else if(areaCode != null && areaCode.length == 4){
						this.citys = res.data.result;
					}else{
						this.areas = res.data.result;
					}
				}
			);
		},
		showProCode:function(){
			var mySelected = document.getElementById("proCode");
			var val = mySelected.value;
			this.citys = null;
			this.areas = null;
			this.getAreaList(val);
			this.showCityCode();
		},
		showCityCode:function(){
			var selected = document.getElementById("cityCode").value;
			if(selected != null && selected != ''){
				this.getAreaList(selected);				
			}else{
				this.areas = null;
			}
		},
		confirmSelect:function(){
			this.memberCorp.contentArea = document.getElementById("area").value;
			console.log(this.memberCorp.contentArea);
		},
		uploadImg:function(){
			var file = document.getElementById("image").files[0];
			var formdata = new FormData();
			formdata.append("file",file);
			var reader = new FileReader();
			reader.readAsDataURL(file);
			reader.onload=function(){
				document.getElementById("imgShow").src=reader.result;
			}
			this.$http.post(this.requestAddr+"/GetJson/uploadImage",formdata,{emulateJSON:true}).then(
				(res)=>{
					this.memberCorp.contentLogo = res.data.filepath;
				}
			)
		}
	}
}
</script>

<style scoped lang="less">
.yingmoo-store{
  width: 100%;
  .nav{
    width: 1200px;
    height: 46px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    background-color: #f2f2f2;
    margin-top: 20px;
    li{
      list-style: none;
      width: 90px;
      height: 30px;
      margin: 0 20px;
      line-height: 30px;
      color: #666666;
      text-align: center;
      font-size: 16px;
      cursor: pointer;
      &:nth-child(1){
        background-color: #036eb7;
        color: white;
      }
      &:hover{
        background-color: #036eb7;
        color: white;
      }
    }
    .uploading{
      width: 120px;
      height: 30px;
      font-size: 16px;
      line-height: 30px;
      color: #666666;
      text-align: center;
      border-radius: 7px;
      margin-left: 410px;
      cursor: pointer;
      padding-right: 20px;
    }
  }
  .content{
    width: 1200px;
    height: 1480px;
    background-color: white;
    margin: 0 auto;
    h4{
      font-size: 16px;
      color: #333333;
      font-weight: bold;
      padding-left: 40px;
      padding-top: 40px;
    }
    .message{
      display: flex;
      .message-left{
        p{
          width: 145px;
          text-align: right;
          line-height: 60px;
          font-size: 12px;
          color: #333333;
          &:nth-child(1){
            margin-top: 20px;
          }
        }
      }
      .message-right{
        margin-left: 25px;
        .name{
          margin-top: 30px;
          line-height: 37px;
        }
        p{
          line-height: 23px;
          color: #999999;
          font-size: 14px;
          margin-top: 38px;
          span{
            margin-left: 10px;
            img{
              margin-right: 3px;
            }
          }
        }
        div{
          margin-top: 25px;
          .intro{
            width: 622px;
            height: 95px;
            font-size: 14px;
            outline: none;
            border-radius: 3px;
            border: 1px solid #dddddd;
          }
          input{
            width: 622px;
            height: 31px;
            padding-left: 10px;
            font-size: 14px;
            outline: none;
            border-radius: 3px;
            border: 1px solid #dddddd;
          }
          span{
            margin-left: 10px;
            color: #f29600;
          }
          select{
            width: 198px;
            height: 37px;
            margin-right: 16px;
            outline: none;
            border-radius: 3px;
            border: 1px solid #dddddd;
            /*color: #dddddd;*/
            &:nth-child(3){
              margin-right: 1px;
            }
          }
        }
        .select{
          display: flex;
          align-items: center;
          margin-top: 10px;
	      	.text{
	      		width: 100px;
	      		height: 30px;
	      		background-color: #dddddd;
	      		color: #999999;
	      		text-align: center;
	      		line-height: 30px;
	      		border-radius: 3px;
	      		cursor: pointer;
	      		position:absolute; 
	      		&:hover{
	      		  color: white;
	      		  background-color: #f29600;
	      		}
	      	}
	        .up_pic{
	        	width: 100px;
	        	height: 30px;
	        	display: block;
	        	text-align: center;
            line-height: 30px;
            border-radius: 3px;
            cursor: pointer;
	          position:absolute; 
	          z-index: 1000px; 
	          opacity: 0;
	          &:hover{
	      		  color: white;
	      		  background-color: #f29600;
	      		} 
	        }
	        p{
	        	position: absolute;
	        	margin-left: 105px;
	          margin-top: 25px;
	          .color{
	            color: red;
	            padding-right: 15px;
	          }
	        }
        }
        .image-logo{
          width: 622px;
          height: 100px;
          margin-top: 45px;
        }
        .submit{
          width: 103px;
          height: 30px;
          color: white;
          background-color: #f29600;
          text-align: center;
          line-height: 30px;
          border-radius: 7px;
          margin-top: 44px;
          cursor:pointer;
        }
      }
    }
  }
}
</style>
